<!--
 * @Descripttion: 
 * @version: 
 * @Author: wl
 * @Date: 2020-05-13 13:27:23
 * @LastEditors: wl
 * @LastEditTime: 2020-06-07 16:48:03
--> 

<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form
          :inline="true"
          :model="filters"
          label-width="90px"
          label-position="right"
        >
          <el-form-item label="名称：">
            <el-input
              class="normal"
              placeholder="请输入登录名称"
              clearable
              v-model="filters.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="开始时间：">
            <el-date-picker
              v-model="filters.startTime"
              type="date"
              placeholder="开始时间"
              :format="'yyyy-MM-dd'"
              value-format="timestamp"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              v-model="filters.endTime"
              type="date"
              placeholder="结束时间"
              :format="'yyyy-MM-dd'"
              value-format="timestamp"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button type="primary" @click="handleQuery()">查询</el-button>
      </div>
      <!--工具栏-->
      <div slot="content">
        <el-table
        :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column
            prop="userName"
            header-align="center"
            align="center"
            label="登录名称"
          ></el-table-column>
          <el-table-column
            prop="method"
            header-align="center"
            align="center"
            label="方法"
          ></el-table-column>
          <el-table-column
            prop="ip"
            header-align="center"
            align="center"
            label="IP"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            label="登录时间"
          ></el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
  </div>
</template>

<script>
import KtTable from "@/views/Core/KtTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
export default {
  components: {
    KtTable,
    KtButton,
  },
  data() {
    return {
      flag: false,
      size: "small",
      loading: false,
      filters: {
        userName: "",
        startTime: "",
        endTime: "",
      },
      asideShow: false,
      columns: [
        { prop: "id", label: "ID", minWidth: 60 },
        { prop: "userName", label: "用户名", minWidth: 100 },
        // {prop:"operation", label:"操作", minWidth:120},
        { prop: "method", label: "方法", minWidth: 180 },
        { prop: "params", label: "参数", minWidth: 220 },
        { prop: "ip", label: "IP", minWidth: 120 },
        { prop: "time", label: "耗时", minWidth: 80 },
        { prop: "createBy", label: "创建人", minWidth: 100 },
        {
          prop: "createTime",
          label: "创建时间",
          minWidth: 120,
          formatter: this.dateFormat,
        },
        // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
        // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
      ],
      pageRequest: { page: 1, limit: 10 },
      totalSize: 0,
      pageResult: [],
      showOperation: false,
    };
  },
  methods: {
    // 获取分页数据
    handleQuery: function () {
      //   if (data !== null) {
      //     this.pageRequest = data.pageRequest;
      //   }
      //   this.pageRequest.columnFilters = {
      //     userName: { name: "userName", value: this.filters.name }
      //   };
      //   let gte=this.filters.startTime.parse(this.filters.startTime)
      //   let lte=this.filters.endTime.parse(this.filters.endTime)

      let params = {};
      if (this.filters.startTime || this.filters.endTime) {
        params = {
          where: {
            userName: this.filters.userName,
            createTime: {
              $gte: this.filters.startTime,
              $lte: this.filters.endTime,
            },
          },
        };
      } else {
        params = {
          where: {
            userName: this.filters.userName,
            createTime: "",
          },
        };
      }

      let param = JSON.stringify(params);
      this.loading = true;
      this.$api.log.findPage(param).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.pageResult = res.data;
          this.totalSize = res.count;
          this.pageResult.map((item) => {
            item.createTime = this.$format(item.createTime);
            item.ip = item.ip.slice(-14);
          });
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.handleQuery();
    },
    // 时间格式化
    dateFormat: function (row, column, cellValue, index) {
      return format(row[column.property]);
    },
  },
  mounted() {
    this.handleQuery();
  },
};
</script>

<style scoped>
</style>